/*----Body----*/

@font-face { font-family: Planet;
src: url(deltarune.ttf);}

@font-face { font-family: Space;
src: url(Police/windows-bold[1].ttf);}

@font-face { font-family: Nebula;
src: url(Police/GothicPixels.ttf);}

@font-face { font-family: Cosmos;
src: url(Police/EmojiFont2.ttf);}

@font-face { font-family: Roboto_cube;
src: url(Police/Geo/Geo-Regular.ttf);}

@font-face { font-family: Roboto;
src: url(Police/Roboto/Roboto-VariableFont.ttf);}



/* astuce : Pour zoomer image quand hover 
tranform: scale (1.5);
transition: transform,0,3s ease;*/





h1 {
	font-size: 50px;
	color: white;
	 -webkit-text-stroke: 1px #cbc5d8; 
    text-stroke: 1px #8ebcce;
    text-shadow: 2px 2px 3px #cbc5d8;  
    font-family: Space
}

h2 {
	font-size: 30px;
	font-family: space;
	 -webkit-text-stroke: 1px #cbc5d8; 
    text-stroke: 1px #cbc5d8;  
    color: white;
    text-shadow: 1px 1px 2px #cbc5d8; 
}

h3 {
	color: white;
	font-size: 25px;
	letter-spacing: 0.5px;
	font-family: Roboto_cube;

}

/*--Police telecommande---*/
h4 {
	font-size: 20px;
	color: white;
	font-family: Roboto_cube;
	text-align: center;
}


h5 {
	opacity: 75%;
	color: #6ba7be;
	font-size: 65px;
	font-family: Space
}

/*--Police tags---*/
h6 {
	font-size: 15px;
}

a {
	color: white;
	text-decoration: none;
}

p {
	font-family: Roboto_cube;
	font-size: 21px;
	color: white;
}

img {
	width: 100%;
	object-fit: cover;
}








/*---TELECOMMANDE--*/


.bouton {
	background-color: black;
	position: sticky;
	top: 0;
	border-bottom: 9px solid black;
	border-top: 7px solid black;
	z-index: 100;
}

#mobile-navigation {
    left: 0;
    top: 0;
    /*height: 600px;
    width: 180px;*/
    height: 650px;
    width: 200px;
 	padding-bottom: 50px;
 	padding-left: 20px;
 	padding-right: 20px;
 	padding-top: 0px;
    transition: transform .2s ease-out, opacity .2s ease-out,
    display .2s ease-out;
    transition-behavior: allow-discrete;
    background-color: #323232;
    border: 1px solid #1B1B1B ;
    border-bottom: 20px solid #1B1B1B ;
    box-shadow: 0 0 200px rgba(0,0,0,0.3) inset;

    /*POPOVER EN ETAT FERMÉ*/
    opacity: 0;
    transform: translateX(-50px);
  }
#mobile-navigation:popover-open {
    @starting-style {/*POPOVER AVANT L'ENTREE DANS LE CHAMP*/
      opacity: 0;
    }

    /*POPOVER EN ETAT OUVERT*/
    opacity: 1;
   /*transform: translateX(-275%);*/
   	transform: translateX(10px);
  }


#infraviolet {
	position: sticky;
	left: 94%;
	top: 30px;
 	font-size: 50%;
 	padding: 10px;
 	background-color: #6250af;
 	transition-duration: 0.5s;
 	border: 1px solid #a69fc5;
 	box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
 	border-radius: 100px;
 	box-shadow: -1px -5px 6px #6250af ;


/*---- animation-duration: 5s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
   box-shadow: 1px 5px 10px #6250af ;
}

@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; } -----*/
} 




.off {
	margin-top: 50px;
	margin-bottom: 30px;
	padding-right: 45px ;
	padding-left: 45px;
	text-align: center;
}

.telecommande {
	display: grid;
	grid-template-columns: 2fr 2fr 2fr;
}



.homeicon {
	background-color: #323232;
	border: 1px solid #1B1B1B ;
	padding: 5px;
	border-bottom: 5px solid #1B1B1B ;
	margin: 2px;
	text-align: center;
	box-shadow: 1px 2px 1px black;
	box-shadow: 0 0 35px rgba(0,0,0,0.2) inset;

}


.homeicon_off {
	background-color: #323232;
	border: 1px solid #1B1B1B ;
	padding: 5px;
	border-bottom: 5px solid #1B1B1B ;
	margin: 2px;
	text-align: center;
	box-shadow: 1px 2px 1px black;
	box-shadow: 0 0 35px rgba(0,0,0,0.2) inset;

}


.homeicon img {
	object-fit: cover;
}

.homeicon h6 {
	font-family: Roboto_cube;
	font-size: 10px;
}

.homeicon_off img {
	width: 2.70vw;
	height: 3vw;
}

.buttonhome {
	box-shadow: 0 0 70px rgba(0,0,0,0.1) inset;
}


.footercommande {
	position: fixed;
	left: 20%;
	bottom: 10px;
	text-align: center;
}


/*---FIN DE TELECOMMANDE--*/















body {
	position: static;
	background-color: black;
	box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
	margin: 0;
	border: 3px black solid;
	cursor:
  url("Images/souris.png") 4 12,
  auto;

  cursor:
  url("Images/souris.png") 4 12,
  pointer;

}


/*-----.inner-border {
   position: relative;
   margin: 10px;
   border: 30px solid black;
   border-radius: 30px;
}


.inner-border::before {
   content: "";
   top: -4px;
   left: -4px;
   right: -4px;
   bottom: -4px;
   position: absolute;
   border: 10px solid black;
   pointer-events: none;
   border-radius: 10px
} -----*/








/*--EFFET TELEVESION----*/
.noise {
	position : fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	content: "";
	opacity: .1;
	z-index: -10;
	pointer-events: none;
	background: url(White-noise.gif);

}

.noise2 {
	position : absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 105vh;
	content: "";
	opacity: .08;
	z-index: 1000;
	pointer-events: none;
	background: url(White-noise.gif);

}

.noisepsaa1 {
	position : absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 105vh;
	content: "";
	opacity: .08;
	z-index: 4000;
	pointer-events: none;
	background: url(White-noise.gif);
}



.noisepsaa2 {
	position : absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 105vh;
	content: "";
	opacity: .08;
	z-index: 4000;
	pointer-events: none;
	background: url(White-noise.gif);
}



.noisepsaa3 {
	position : absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 182vh;
	content: "";
	opacity: .08;
	z-index: 4000;
	pointer-events: none;
	background: url(White-noise.gif);
}

.noisepsaa9 {
	position : absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 127vh;
	content: "";
	opacity: .08;
	z-index: 4000;
	pointer-events: none;
	background: url(White-noise.gif);
}





/*----Accueil---*/
.noise3 {  
	position : absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 77vh;
	content: "";
	opacity: .08;
	z-index: 4000;
	pointer-events: none;
	background: url(White-noise.gif);

}





.noiseprojetghost {
	position : absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 255vh;
	content: "";
	opacity: .08;
	z-index: 1000;
	pointer-events: none;
	background: url(White-noise.gif);

}




.inside {
	/*---border-radius: 30px;
	border: 5px solid black;
	background-color: #4e408c;---*/

	font-family: space;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin : 0;
	margin-bottom: 500px;
	margin-top: 55px;
	margin-left: 55px;
	margin-right: 55px;


  
}

.inside_game {
	/*---border-radius: 30px;
	border: 5px solid black;
	background-color: #4e408c;---*/

	font-family: space;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin : 0;
	margin-bottom: 500px;
	margin-top: 55px;


  
}

























/*-------HOME-----*/

.signalaround {
	background-color: black;
}

.signal {
	position: absolute;
	top: -72px;
	left: 55px;
	padding: 0;
	margin: 0;
	text-shadow: 5px 5px 6px #6250af;
	z-index: 1000;
}


















/*--PARTS-----*/




.titlehomepage {

	margin-bottom: 50px;
	position: absolute;
	left: 55px;
	z-index: 1000;
	top: 100px;

}

.videointro {
	margin: 0;
	padding: 0;
	background-color: black;

}


.videointro video {
	width: 100%;
	height: 100%;



}

.videointro img {
	width: 100%;
	height: 100%;

}

.asteroid {
	letter-spacing: 6px;
}

.soulmate {
	margin-left: 30px;
	letter-spacing: 7px;
}



/*-----Header----*/

.Menu {
	padding-top: 30px;
	display: grid;
	grid-template-columns: 1;
	margin-top: 0px;
}

@media only screen and (min-width: 1000px) {
	.Menu {
		display: grid;
		grid-template-columns: 7fr 2fr 1fr;
	}

}


.Menu_Left {
	margin-left: 10px;
}

.Menu_Right {
	margin-right: 10px;
}

.Menu_Center {
	margin_right: 10px;
}











/*-----Part1----*/

.Parts {
	/*--background-color: #E0CAED;--*/
	margin: 0px;
}


.Header {
	display: grid;
	grid-template-columns: 3fr 3fr;
	padding-bottom: 8px;
	border-bottom: solid 3px lavenderblush;
	margin-top: 15px;

}

.Header_Right{
	margin-left: 30px;


}






.new {
	border-top: solid 3px lavenderblush;
	border-bottom: solid 3px lavenderblush;
	background-color: #6250af;
	padding: 0px;
	margin: 0px;

}





/*------Projet-----*/


.Projet {
	display: grid;
	grid-template-columns: 5fr 6fr;
	padding-bottom: 8px;
	border-bottom: solid 3px lavenderblush;
	margin-top: 15px;

	
}

.Miniature {
	width: 500px;
	margin-right: 25px;
}














/*-------Part2------*/

.Caroussel_title {
	border-bottom: solid 3px lavenderblush ;
	
}


.Caroussel {
	display: grid;
	grid-template-columns: 3fr 3fr 3fr;
	margin-top: 10px;
	border-bottom: solid 3px lavenderblush;
	padding-bottom: 5px;

}

.Image {
	width: 350px;
	height: 350px;
}




















/*---------PAGE PROJECT INTODUCTION-----*/


.welcome_home {

	position: fixed;
	z-index: 10000;
	background-color: black;
	width: 100vw;
	height: 100vh;

	animation-name: example;
    animation-duration: 3s;
    visibility:hidden;
}

@keyframes example {
    from {visibility:visible;
      opacity: 100%;}
    to {opacity: 100%;
      visibility:visible;}
}









.channel_description {
	position: fixed;
	z-index: 100;
	top: 75%;

	background-color: black;
	height: 150px;
	width: 80vw;
	border: 3px solid lavenderblush;
	margin-left: 150px;
	margin-right: 150px;
	color: white;
	margin-top: 0px;
	margin-bottom: 0px;



	animation-name: example;
    animation-duration: 6s;
   visibility:hidden;
}

@keyframes example {
    from {visibility:visible;
      opacity: 100%;}
    to {opacity: 70%;
      visibility:hidden;}
}

.channel_descpt_up {
	display: grid;
	grid-template-columns: 6fr 5fr;
	border-bottom: solid 3px lavenderblush;
	margin-left: 20px;
	margin-right: 20px;


}

.channel_descpt_up h6{
	margin-top: 30px;
	padding-top: 30px;
	width: 60px;
	border: 2.5px solid lavenderblush;
	margin: 0;
	margin-bottom: 5px;
	padding: 3px;
	color:lavenderblush ;
	letter-spacing: 1px;
}

.channel_descrpt_down {
		display: grid;
	grid-template-columns: 6fr 5fr;
	margin-left: 20px;
	margin-right: 20px;
}

.channel_tag {

	margin-top: 35px;
}











/* PROJET PAGE EXEMPLE SIMAILAIR POUR TOUS LES PROJETS !!!!!!*/



.titlehomepage_projet {
}




.channel_description_kept {
	position: fixed;
	z-index: 100;
	top: 73%;

	background-color: black;
	height: 185px;
	width: 92vw;
	border: 2px solid lavenderblush;
	margin-left: 50px;
	margin-right: 50px;
	color: white;
	margin-top: 0px;
	margin-bottom: 0px;
	opacity: 75%;
}

.channel_description_kept h2 {
	font-size: 23px;
}



.channel_descpt_up_kept {
	display: grid;
	grid-template-columns: 12fr 4fr 1fr;
	border-bottom: solid 2px lavenderblush;
	margin-left: 20px;
	margin-right: 20px;
	padding: 0px;
}



.channel_descrpt_down_kept {
	margin-left: 20px;
}

.channel_tag_kept {

	margin-top: 2px;
	margin-left: 35px;
	margin-right: 100px;
}


.channel_tag_kept p {

	border: solid white 2px;
	padding-left: 12px;
}

.channel_arrow_kept p {
	border: solid 2px white;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 13px;
}

.channel_arrow_kept  {
	margin-right: 75px;
	margin-top: 10px;
	

}







/*-------------------------------------*/





.project_title {
	border-bottom: solid 3px lavenderblush ;

	margin-top: 0px;
	padding-top: 0px;
	padding-left: 20px;
}


.project_introduction {
	display: grid;
	grid-template-columns: 4fr 6fr;
	padding-bottom: 30px;

	margin-top: 15px;
	padding-top: 20px
;
}

.Image {
	width: 350px;
	height: 350px;
}

.project_1stimage {
	width: 500px;
	margin-right: 25px;
	border-right: 2px solid lavenderblush;
	padding-right: 30px;
}

.tags {
	padding-top: 50%;
	display: grid;
	grid-template-columns: 1fr 1fr 7fr;
}

.tag_digital {
	height: 5px;
	width: 63px;
	padding: 10px;
}

.tag_digital h6 {
	border: 2.5px solid lavenderblush;
	margin: 0;
	margin-bottom: 5px;
	padding: 3px;
	color: lavenderblush;
	letter-spacing: 1px;
}

.tag_fictif {
	height: 5px;
	width: 50px;
	padding: 10px;
}

.tag_fictif h6 {
	border: 2.5px solid lavenderblush;
	margin: 0;
	margin-bottom: 5px;
	padding: 3px;
	color:lavenderblush ;
	letter-spacing: 1px;
}




ul {
  list-style-type: none;
}

.carousel-items_projet {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

   
    border-bottom: solid 3px lavenderblush;
    padding: 0;
    padding-bottom: 20px;
    height: 600px;
    
}

.carousel-item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 50px;
    margin-left: 1rem;
    object-fit: cover;
}

.card img {
	object-fit: cover;
}

.card {
	width: 350px;
	height: 350px;
}

.carousel-items::-webkit-scrollbar-track {
    background-color: black;
    opacity: 0;
}

.carousel-items::-webkit-scrollbar {
    height: 6px;
    opacity: 0;
}

.carousel-items::-webkit-scrollbar-thumb {
    background-color: #CBC5D8;
    border-radius: 1px;
    opacity: 0;
}





/*-------VRAI CAROUSSEL------*/

ul {
  list-style-type: none;
 
}

.carousel-items {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;


    padding: 0;
    padding-bottom: 30px;
    border-bottom: solid 3px lavenderblush;
	border-top: solid 3px lavenderblush;

    
}

.carousel {
	padding-top: 10px;
	


}


.carousel-item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 50px;
    margin-left: 1rem;
    object-fit: cover;
}

.card img {
	object-fit: cover;
}

.card {
	width: 350px;
	height: 350px;
}

.carousel-items::-webkit-scrollbar-track {
    background-color: black;
    opacity: 0;
}

.carousel-items::-webkit-scrollbar {
    height: 6px;
    opacity: 0;
}

.carousel-items::-webkit-scrollbar-thumb {
    background-color: #CBC5D8;
    opacity: 0;
}



/*--------- GRILLLE PROJET PRESENTATION DU DEVLOPEMENT ET TOUS ET TOUS ----*/

.grille_projet {

	display: grid;
	grid-template-columns: 2fr 2fr 2fr;
	height: 1800px;

}

.image_grille  {
	width: 400px;
	
}

.image_grille img{

	object-fit: cover;
	height: 530px;



}



.grille_porfolio {

	margin-top: 35px;
	display: grid;
	grid-template-columns: 3fr 3fr 3fr;


}








.projet_grille_g  {
	padding-right: 15px;
	filter: grayscale(100%); 
	margin: none;
	
}


.projet_grille_g:hover {
 	filter: none;
	content: none;

}

.projet_grille_g img{
	object-fit: cover;
	height: 500px;
	margin: none;
}











.projet_grille_cg  {
	padding-left: 15px;
	padding-right: 15px;
	filter: grayscale(100%); 
	margin: none;
}


.projet_grille_cg img{
	object-fit: cover;
	height: 500px;

}

.projet_grille_cg:hover {
	filter: none;
	content: none;
}


.projet_grille_cg video {
	height: 50vh;
	filter: none;
}











.projet_grille_cd  {
padding-left: 15px;
filter: grayscale(100%); 
margin: none;	
}


.projet_grille_cd img{
	object-fit: cover;
	height: 500px;
}

.projet_grille_cd:hover {
	filter: none;
	content: none;
}











.grille_du_projet {

	margin-top: 35px;
	display: grid;
	grid-template-columns: 3fr 3fr 3fr;


}

.grille_video_game {
	margin-top: 35px;
	display: grid;
	grid-template-columns: 2fr 1fr;

}

.grille_de_video {
	margin-top: 35px;
	display: grid;
	grid-template-columns: 2fr 1fr;
}

.grille_video_game img {
	height: 500px;
	width: 60vw;
	filter: none;
	object-fit: cover;
	
}
.grille_video_game video {
	height: 500px;
	width: 60vw;
	filter: none;
	object-fit: cover;
	
}


.grille_video img {
	height: 450px;
	width: 60vw;
	filter: none;
	
}


.grille_video_s img {
	height: 600px;
	width: 60vw;
	filter: none;
}


.grille_video video {
	height: 600px;
	width: 60vw;
	filter: none;
	object-fit: cover;
	
}

.grille_video_appli video {
	height: 70vh;
	width: 20vw;
}


.grille_video_appli img {
	height: 135vh;
	width: 60vw;

}






.grille_text {
	margin: 0px;
	padding: 0px;
}


.grille_g  {
	padding-right: 15px;
	margin: none;
	
}


.grille_g img{
	object-fit: cover;
	height: 500px;
	margin: none;
}











.grille_c  {
	padding-left: 15px;
	padding-right: 15px;
	margin: none;
}


.grille_c img {
	object-fit: cover;
	height: 500px;

}


.grille_c video {
	object-fit: cover;
	height: 500px;

}











.grille_d  {
padding-left: 15px;
margin: none;	
}


.grille_d img{
	object-fit: cover;
	height: 500px;
}



.grille_d_text {
	border-left: solid white 2px;
	padding-left: 20px;
}


/*.projet_grille_d  {
	padding-left: 25px;
filter: grayscale(100%); 	
}


.projet_grille_d img{

	object-fit: cover;
height: 500px;
	width:  28vw;

}

.projet_grille_d:hover {
		filter: none;
	content: none;
}



.projet_grille_d  {
	padding: 25px;
	padding-right: 0px;
	filter: blur(2px) grayscale(100%) contrast(80%) drop-shadow(7px 7px 5px #4E408C);
	
}

.projet_grille_d img{

	object-fit: cover;
	height: 500px;
	width:  30vw;

}

.projet_grille_d:hover {
	
	filter: drop-shadow(7px 7px 5px #6BA7BE);
	content: none;
}*/



/*-------Part2------*/

.Caroussel_title2 {
	
}

.Caroussel2 {
	display: grid;
	grid-template-columns: 3fr 3fr 3fr;
	margin-top: 10px;
	
	padding: 0;
	padding-bottom: 20px;
	border-bottom: 3px solid lavenderblush;
}

.image_l {
	margin-right: 10px;
}

.image_r {
	margin-left: 10px;
}

footer {
	background-color: black;
	padding-top: 10px;
	padding-bottom: 30px;
	font-family: space;
	text-align: center;
	color: white;
	margin: 0px;
}































/*------------ACCUEIL----------*/





.screencolor {
	box-shadow: 0 0 200px rgba(0,0,0,0.8) inset;
}


.color {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	height: 70vh;
	

}


.white {
	background-color: white;

}

.periwinkle {
	background-color: #C2CDFD;

}

.gray {
	background-color: #D7D5DD;

}

.pink {
	background-color: #CBC5D8;

}

.cyan {
	background-color: #6BA7BE;

}

.purple {
	background-color: #4E408C;

}

.black {
	background-color: #323232;

}





.dialoguesound {
	display: grid;
	grid-template-columns: 1fr 1fr;
	top: 50%;
}


.leftdialogue {
	background-color: black;
	
	width: 215px;
	height: 30px;
	top: 50%;
	left: 100px;
	position: absolute;
	padding: 20px;
	z-index: 1000;
}

.neonleft {
	position: absolute;
	top: 30%;
	left: 50px;
	padding: 20px;
	height: 200px;
	width: 200px;
}


.discussionright {
	display: grid;
	grid-template-columns: 1fr 1fr ;
}

.rightdialogue {
	background-color: black;
	width: 360px;
	height: 30px;
	top: 50%;
	right: 100px;
	position: absolute;
	padding: 20px;
	z-index: 1000;
}

.neonright {
	position: absolute;
	top: 30%;
	right: 50px;
	padding: 20px;
	height: 200px;
	width: 200px;
}



.typewriter p {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #CBC5D8; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 1.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #CBC5D8; }
}





#stereo_d {
    left: 0;
    top: 0;
    height: 300px;
    width: 300px;
    transition: transform .2s ease-out, opacity .2s ease-out,
    display .2s ease-out;
    transition-behavior: allow-discrete;
   background-color: black;

    /*POPOVER EN ETAT FERMÉ*/
    opacity: 0;
    transform: translateX(-50px);
  }
#stereo_d:popover-open {
    @starting-style {/*POPOVER AVANT L'ENTREE DANS LE CHAMP*/
      opacity: 0;
    }

    /*POPOVER EN ETAT OUVERT*/
    opacity: 1;
   /*transform: translateX(-275%);*/
   	transform: translateX(400px);
  }


#stereo_d_button {
	position: absolute;
	right: 5%;
	top: 80%;
 	height: 50px;
 	aspect-ratio: 1/1;
 	padding: 10px;
 	background-color: lavenderblush;
 	transition-duration: 0.5s;
 	border-radius: 100px;
 	
}




























/*----------------CABLE-----*/


.bottom_tv {
	overflow: hidden;
	display: grid;
	grid-template-columns: 3fr 2fr;
	background-color: black;
	height: 20vh;
	width: 100vw;
	padding-bottom: 20px;
}





.nns_prises {
	height: 40px;
	width: 50vw;
	background-color: black;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding-top: 20px;
	padding-bottom: 20px;
}





.prise_video{
	background-color: #6BA7BE ;
	margin-left: 90px;
margin-right: 90px;
}


.prise_left {
	background-color:#CBC5D8 ;
	margin-left: 90px;
margin-right: 90px;
}


.prise_right {
	background-color: #4E408C ;
	margin-left: 90px;
margin-right: 90px;
}






.nns_cables {
	
	background-color: black;
	height: 70px;
	width: 50vw;
	display: flex;
  	justify-content: center; /* centre le soleil dans l'arrière-plan */

}


.cable_video {
	position: relative;
	top: 10px;
	background-color: #6BA7BE ;
  border-radius: 50%; 
	height: 60px; 
  aspect-ratio: 1 / 1;
   margin-left: 90px;
  margin-right: 90px;

}

.cable_video:hover {
	  animation: 1s linear 0s 1 normal soleil-levant;
}




.stereo_left {
	position: relative;
	top: 10px;
	background-color:#CBC5D8 ;
 border-radius: 50%; 
	height: 60px; 
  aspect-ratio: 1 / 1;
   margin-left: 90px;
  margin-right: 90px;

}

.stereo_left:hover {
	  animation: 1s linear 0s 1 normal soleil-levant;
}


.stereo_right {
	position: relative;
	top: 10px;
	background-color: #4E408C ;
  border-radius: 50%; 
	height: 60px; 
  aspect-ratio: 1 / 1;
  margin-left: 90px;
  margin-right: 90px;

}

.stereo_right:hover {
	  animation: 1s linear 0s 1 normal soleil-levant;
}



@keyframes soleil-levant {
  from {
    /* pousse le soleil en dessous de la zone d'affichage */
    transform: translateY(0px);
  }
  to {
    /* ramène le soleil à sa position par défaut */
    transform: translateY(-80px);
  }
}
















/* PAGE A PROPOS DE MOI MOI MOI MOI MOIIIIIIIII*/

.vide_yooo {
	padding-top: 100px;
}


.frise {
	margin-left: 20px;
	display: grid;
	grid-template-columns: 1fr 7fr 10fr 10fr;

}





.frise_arrow p {
	font-size: 26px;


}

.date p {
	font-size: 30px;
}


.formation p {
	font-size: 25px;
	padding-top: 10px;
}

.lieu p {
	font-size: 25px;
	padding-top: 10px;
}






















/*-----VIDEO GAME PAGE - UNDEAD & GHOST ---------*/

.titlehomepage_game {
	margin-bottom: 50px;
	position: absolute;
	left: 55px;
	z-index: 1000;
	top: 130px;
}

.titlehomepage_game h1 {
	font-size: 80px;
}

.fond_game {
	position: fixed;
	top: 0;
	height: 100vh;
	width: 100vw;
	z-index: -10;
	background-image: repeating-linear-gradient(
    -45deg,
    #4e408c 0 20px,
    #312858 20px 40px
  );
}





.GAME_TRAILER {
	background-color: black;
	margin-top: 13%;
	height: 70vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-left: 100px;
	padding-right: 100px;

}

.game_video {
	box-sizing: game_video;
	margin: 0;
	padding: 0;
	margin-right: 10px;
	margin-left: 10px;
}

.game_presentation {
	height: 100%;
	width: 100%;
	margin-top: 15%;
	margin-left: 10px;
	margin-right: 10px;
}

.game_video video {
	object-fit: full;
	height: 100%;
	width: 100%;
}

.game_video img {
	margin-top: 100px;
}

.moon_bear {
	position: absolute;
	top: 12%;
	right: 0.5%;
	height: 30%;
	aspect-ratio: 1/1;
	margin: 0;
	z-index: -1;
}

.star_bear {
	position: absolute;
	top: 12%;
	right: 9.3%;
	height: 30%;
	aspect-ratio: 1/1;
	margin: 0;
	z-index: -1;
}

.night_bear {
	position: absolute;
	top: 12%;
	right: 18%;
	height: 30%;
	aspect-ratio: 1/1;
	margin: 0;
	z-index: -1;
}

.GAME_TRAILER h2{
	font-size: 23px;
}









.Character_intro_title {
	border-bottom: solid 3px lavenderblush ;
	margin-left: 300px;
	margin-right: 300px;
}


.CHARACTER_INTRODUCTION {
	margin-top: 10px;
	margin-left: 300px;
	margin-right: 300px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 30vh;
	margin-bottom: 360px;
	
}

.drghost_photo {
	margin-right: 10px;
	text-align: center;
	margin-right: 20px;

}



.drghost_photo img {
	border: 5px solid white;

	height: 50vh;

}

.drghost_photo h2 {
	border-bottom: 4px solid lavenderblush;
	padding-bottom: 10px;
	margin-right: 100px;
	margin-left: 100px;
}

.mrundead_photo {
	
	margin-left: 10px;
	margin-right: 10px;
	text-align: center;

}

.mrundead_photo img {
	border: 5px solid white;
	height: 50vh;

}

.mrundead_photo h2 {
	border-bottom: 4px solid lavenderblush;
	padding-bottom: 10px;
	margin-right: 100px;
	margin-left: 100px;
}












#ouvre_fiche {
	color: #4e408c;
	border: none;
	background-color: #CBC5D8;
	border-radius: 100%;
	height: 50px;
	aspect-ratio: 1/1;
}

#ouvre_fiche h4 {
	color: white;
   margin: 2px;
   font-size: 30px;
}


#ouvre_fiche:hover {
	color: #CBC5D8;
	border: none;
	background-color: #4e408c;
	border-radius: 100%;
	height: 50px;
	aspect-ratio: 1/1;
	box-shadow: 0 0 200px rgba(0,0,0,0.3) inset;
}





#ouvre_fiche2 {
	color: #4e408c;
	border: none;
	background-color: #6BA7BE;
	border-radius: 100%;
	height: 50px;
	aspect-ratio: 1/1;
}

#ouvre_fiche2 h4 {
	color: white;
   margin: 2px;
   font-size: 30px;
}


#ouvre_fiche2:hover {
	color: #6BA7BE;
	border: none;
	background-color: #4e408c;
	border-radius: 100%;
	height: 50px;
	aspect-ratio: 1/1;
	box-shadow: 0 0 200px rgba(0,0,0,0.3) inset;
}






#ferme_fiche {
	color: #1B1B1B;
	border: none;
	background-color:  black;
	height: 10px;
	aspect-ratio: 1/1;
}







#fiche_character {
    left: 0;
    top: 0;
    height: 650px;
    width: 50vw;
 	padding-bottom: 20px;
 	padding-left: 20px;
 	padding-right: 20px;
 	padding-top: 0px;

 	background-color: black;
 	

    transition: transform .4s ease-out, opacity .4s ease-out,
    display .4s ease-out;
	transition-behavior: allow-discrete;

    border-radius: 5px;
    border: none;
   

    /*POPOVER EN ETAT FERMÉ*/
    opacity: 0;
    transform: translateX(-50px);
  }

#fiche_character:popover-open {
    @starting-style {/*POPOVER AVANT L'ENTREE DANS LE CHAMP*/
      opacity: 0;
    }

    /*POPOVER EN ETAT OUVERT*/
    opacity: 1;
   /*transform: translateX(-275%);*/
   	transform: translateX(0px);
  }







#fiche_character2 {
    left: 0;
    top: 0;
    height: 650px;
    width: 50vw;
 	padding-bottom: 20px;
 	padding-left: 20px;
 	padding-right: 20px;
 	padding-top: 0px;

 	background-color: black;
 	

    transition: transform .4s ease-out, opacity .4s ease-out,
    display .4s ease-out;
	transition-behavior: allow-discrete;

    border-radius: 5px;
    border: none;
   

    /*POPOVER EN ETAT FERMÉ*/
    opacity: 0;
    transform: translateX(-50px);
  }

#fiche_character2:popover-open {
    @starting-style {/*POPOVER AVANT L'ENTREE DANS LE CHAMP*/
      opacity: 0;
    }

    /*POPOVER EN ETAT OUVERT*/
    opacity: 1;
   /*transform: translateX(-275%);*/
   	transform: translateX(0px);
  }













.fiche_details {
	border-radius: 10%/20%;
	height: 550px;
    width: 47vw;
  /*---background-image: repeating-linear-gradient(
    -45deg,
    #4e408c,
    #4e408c 20px,
   #312858 20px,
   #312858 40px
  );---*/
  
  background-image: repeating-linear-gradient(
    -30deg,
   #CBC5D8 0 40px,
   #a297b9 40px 80px
  );

  box-shadow: 0 0 200px rgba(0,0,0,0.3) inset;

  opacity: 95%;

  margin: 20px;

}


.character_up {
	border-bottom: solid 3px lavenderblush;
	margin-bottom: 0;
}

.character_up h2 {
	color: white;
	 -webkit-text-stroke: 1px black; 
    text-stroke: 1px black;  
    text-shadow: 1px 1px 2px black; 
}

.character_middle {
	display: grid;
	grid-template-columns: 2fr 4fr;
	height: 70%;
	margin-left: 40px;

}

.character_fullbody {
	height: 70%;
}
.character_fullbody img {
	height: 525px;
	object-fit: full;
	z-index: 100;
}

.character_dialogue {
	margin-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
	
}

.character_dialogue p {
	color: black;
}

.character_down {
	position: absolute;
	opacity: 85%;
	top: 72%;
	left: 10%;
	height: 80px;
	width: 30vw;
	padding: 20px;
	border: 1px lavenderblush solid ;
	background-color: black;
	padding-top: 10px; 


}

.character_down p {
	justify-content: center;
	font-size: 18px;
}


.character_sprite_intro {
	position: absolute;
	bottom: 40%;
	right: 2%;
	height: 1vh;
}



.star_bear2 {

	position: absolute;
	top: 161%;
	left: 0.1%;
	height:40%;
	aspect-ratio: 1/1;
	margin: 0;
	z-index: -1;

}